<script lang="ts" setup>
import { ref } from "vue";
import Child1 from './Child1.vue'
import Child2 from './Child2.vue'

defineOptions({
    name: "index",
});
//--================= Data
let house = ref(4)
let c1 = ref();
//--================= Methods

//--================= Other

function changeC1Toy() {
    c1.value.toy = "Dell";
    c1.value.book = 20
}

// function getAllChild(refs: { [key: string]: any }) {
function getAllChild(refs: any) {
    // console.log(refs.c1.toy);
    // refs.cl.toy = "AAAAA"

    for (let key in refs) {
        // console.log(refs[key]);
        refs[key].book += 3;
    }

}
// 向外部提供数据
defineExpose({ house })

</script>

<template>
    <div class="main">
        <h3>父组件</h3>
        房子 {{ house }} 套

        <button @click=changeC1Toy()>改变 C1 中的玩具</button> <br>

        <button @click="getAllChild($refs)">获取所有子组件的实例对象</button>

        <Child1 ref="c1" />
        <Child2 ref="c2" />
    </div>
</template>

<style scoped>
.main {
    background-color: #eee;
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
    min-height: 800px;
}
</style>
